<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="checkbox" id="all"> 全选 <br>
    <input type="checkbox" class="girl"> 貂蝉 <br>
    <input type="checkbox" class="girl"> 关羽 <br>
    <input type="checkbox" class="girl"> 马超 <br>
    <input type="checkbox" class="girl"> 孙尚香 <br>

    <script>
        //1. 先获取元素
        let all = document.querySelector('#all');
        let girls = document.querySelectorAll('.girl');

        //2. 给 all 注册点击事件
        all.onclick = function() {
            for(let i = 0; i < girls.length; i++) {
                // all.checked 就是 all 这个复选框的选中状态
                girls[i].checked = all.checked;
            }
        }

        //3. 针对每个girl注册点击事件，实现对于 all 的取消操作
        for(let i = 0; i < girls.length; i++) {
            girls[i].onclick = function() {
                all.checked = checkGirls(girls);
            }
        }

        function checkGirls(girls) {
            //判断是不是所有的girl都被选中了
            for(let i = 0; i < girls.length; i++) {
                if(!girls[i].checked) {
                    return '';
                }
            }
            //遍历完发现，所有都被选中着，就让 all 也是选择状态
            return 'checked';
        }
    </script>
</body>
</html>